<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <input type="button" value="发送ajax请求头参数" onclick="sendAjax()">
    <script>
        /*
            请求头参数：以键值对方式为服务器提供报文解析时候的相关依据(如：Content-Type)
            请求头参数在传统的web请求中是很难进行自行定义的，一般都由标签或者浏览器自行设定
            请求头参数多数是由w3c规范的一些具有固定意义的参数，一般不需要手动设置
            请求头参数本身会携带一些比较敏感的描述属性，而这些数据可能会导致一些安全问题，开发中也会对请求属性进行设置操作的限制
            ajax请求提供专门的请求头设置方法，通过该方法可以完成自定义请求头属性的设置和相关请求头属性的修改
            ajax请求头属性设置方法本身也是受限制的，存在一些敏感的请求头属性时无法设置或修改的
            
            XMLHttpRequest.setRequestHeader(String header, String value)是设置HTTP请求头部的方法。
            此方法必须在 open() 方法和 send() 之间调用。
            如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
            header 取值要求 英文字符和关键字 -，才可以被后台解析
            请求头报文由HTTP协议定义，而HTTP协议报文仅支持 ISO8859-1字符 => 不支持中文的        
        */

        function sendAjax(){
            
            let xhr = new XMLHttpRequest();
            xhr.open("get", `/header`);

            //自定义请求头，用于表示当前请求是由XMLHttpRequest发送
            xhr.setRequestHeader("X-Requested-With",'XMLHttpRequest');
            xhr.setRequestHeader("aa",'bb');
            xhr.setRequestHeader("aa",'cc');
            // xhr.setRequestHeader("中国","爱你");
            xhr.onload=function(){
                console.log(xhr.responseText);
            };
            xhr.send();
        }
    </script>
</body>

</html>